<template>
  <div>
      <div class="topBoxEmpty"></div>
      <div class="topBox">
        <four-steps :step="2" ref="changeStep"></four-steps>
        <a class="choLab" href="https://static.meiqia.com/dist/standalone.html?_=t&eid=25105" target="_blank">
            <img src="@/assets/images/erji.png" alt="">
            <span>家装小秘</span>
        </a>
      </div>
      <div class="section" v-for="(item,index) in stylistData" :key="index">
        <swiper :options="swiperOptionArr[index]">
            <swiper-slide v-for="(item2,index2) in item.File_info" :key="index2"><img class="swiper_img" :src="item2+'!hmm'" alt=""></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <span class="swiTitle">{{item.Subject_subject}}</span>
        <div class="swiLab">
            <img src="@/assets/images/eye2.jpg" alt="">
            <span>{{item.Subject_views}}人对此案例感兴趣</span>
        </div>
        <div class="sjsMsg" v-if="a6">
          <span class="sjsTxt">推荐设计师</span>
          <div class="sjsBox">
              <img class="sjsHea" :src="item.Designer_logo+'!hmm'" alt="">
              <div class="sjsCen">
                  <div class="top">
                      <span>{{item.Designer_name}}</span>
                      <img src="@/assets/images/star2.jpg" alt="">
                      <img src="@/assets/images/star2.jpg" alt="">
                      <img src="@/assets/images/star2.jpg" alt="">
                      <img src="@/assets/images/star3.jpg" alt="">
                      <img src="@/assets/images/star3.jpg" alt="">
                  </div>
                  <span class="center">东易日盛高级设计师</span>
                  <span class="bottom">电话：{{item.Designer_mobile}}</span>
              </div>
              <a class="sjsRig" :href="'tel:'+item.Designer_mobile">联系设计师</a>
          </div>
        </div>
        <div class="botBox">
            <span class="ysTxt">预计装修预算：<em>20-25万</em></span>
            <p class="desTxt">此预算按照该案例的平均价格得出，仅供您参考因选材及个性项设计原因，价格会发生相对浮动，获得详细报价及方案请您联系设计师或预约到店体验设计师根据您的需求，给出您满意的家装方案及精准报价。</p>
            <span class="mxBtn" v-if="!a6" @click="mxBtn">装修用材明细>></span>
        </div>
      </div>
      
      <div class="bfBoxe"></div>
      <div class="bfBox">
          <span class="yyBtn" @click="yyBtn">预约看样板间</span>
          <span class="yyTxt">已有<em>28000人</em>预约过</span>
          <span class="yyTxt">样板间实景体验,滴滴免费接送 </span>
      </div>
      
  </div>
</template>

<script>
import FourSteps from './components/FourSteps'
import utils from '@/assets/scripts/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'


export default {
  name: 'threeStep',
  components: {
      FourSteps,swiper,swiperSlide
  },
  data(){
      return {
        a6:true,// A6||速美
        swiperOptionArr:null,
        swiperOption: {
            pagination: {el: '.swiper-pagination'},
            autoplay:{
                delay: 3000,
                disableOnInteraction: false
            },
            loop: true,
        },
        stylistData:null,
        stylistIdArr:null,//设计师ID
      }
  },
  methods:{
    //   装修明细
    mxBtn(res){
        this.$router.push({name:'fitmentDetails',params:{
            id:666
        }})
    },
    // 预约看样板间
    yyBtn(res){
        this.$router.push({name:'fourStep',params:{
            stylistIdArr:this.stylistIdArr
        }})
    },
    // 获取设计师
    getStylist(res){//获取案例设计师
        this.$store.commit('getParam');
        var param = this.$store.state.param
    //   param.subject_id = this.stepData.subject_id; 141629,140683,140526,139397,138374,138373,136105,135817,135817,135075
        param.subject_id_list = '1189,1237,15,485,225,2218,2422,2207,3866,2956'
        this.$jsonp(    
            this.$store.state.categoryUrl + "/photo/getDesignerInfoBySubjectId",
            param
        ).then(res => {
            var swiperOptionArr = [];
            var stylistIdArr = '';
            for(var i in res[2]){
                swiperOptionArr.push(this.swiperOption)
                stylistIdArr+=res[2][i].Designer_id+','
            }
            this.$set(this, "swiperOptionArr", swiperOptionArr);
            this.$set(this, "stylistIdArr", stylistIdArr.substring(0,stylistIdArr.length-1));
            this.$set(this, "stylistData", res[2]);
            
        });
    }
  },
  created() {
    this.$nextTick(() => {
        this.$refs.changeStep.changeStep(3);
        this.getStylist();//获取设计师
    })
  },
  mounted(){
  }
}
</script>

<style lang="stylus" scoped>
.bfBoxe{
    height 194px
}
.bfBox
    width 100%
    position fixed
    left 0
    bottom 0
    z-index 6
    background #ffffff
    display flex
    align-items center
    flex-direction column
    justify-content flex-end
    height 194px
    .yyBtn
        display block
        width 628px
        height 80px
        line-height 80px
        fong-size 28px
        color #ffffff
        letter-spacing 1px
        text-align center
        border-radius 10px
        background #ce0021
        margin 0 0 20px
    .yyTxt
        line-height 22px
        font-size 22px
        color #666666
        margin 0 auto
        margin-bottom 20px
        em
            color #d1102f


.topBoxEmpty
    height 300px
.topBox
    position fixed
    left 0
    top 0
    width 100%
    z-index 66
    height 300px
    box-shadow 0 0 10px 2px #f4f4f4
    box-sizing border-box
    padding-top 62px
    display flex
    flex-direction column
    align-items center
    margin-bottom 15px
    background url(../../assets/images/bg1.png)
    background-size 100% 100%
    .choLab
        width 260px
        height 80px
        border-radius 10px
        display flex
        align-items center
        justify-content center
        box-sizing border-box
        background #d60622
        margin-top 16px
        font-size 22px
        color #ffffff
        img 
            width 31px
            height 28px
            margin-right 12px
.section
    width 700px
    margin 0 auto
    margin-top 10px
    padding 30px 0 0
    border-radius 10px
    box-shadow 0 0 10px 2px #f4f4f4
    display flex
    align-items center
    flex-direction column
    position relative
    .swiper-container
        width 628px
        height 360px
        .swiper-slide
            width 628px
            height 360px
            .swiper_img
                width 628px
                height 360px
    .swiTitle
        width 628px
        text-align left
        line-height 28px
        font-size 28px
        color #333333
        font-weight bold
        letter-spacing 1px
        margin 30px 0 20px
    .swiLab
        width 628px
        height 22px
        font-size 22px
        display flex
        align-items center
        color #666666
        img 
            width 31px
            height 21px
            margin-right 8px
.sjsMsg
    width 628px
    display flex
    flex-direction column
    margin 0 auto
    margin-top 50px
    .sjsTxt
        line-height 30px
        font-size 30px
        font-weight bold
        color #333333
        margin-bottom 40px
    .sjsBox
        width 100%
        display flex
        align-items center
        justify-content space-between
        color #333333
        .sjsHea
            width 138px
            height 138px
            border-radius 50%
            margin-right 20px
            object-fit: cover;
        .sjsCen
            display flex
            height 138px
            flex 1
            flex-direction column
            .top
                line-height 28px
                display flex
                align-items center
                font-size 28px
                font-weight bold
                span 
                    margin-right 18px
                img 
                    width 23px
                    height 23px
                    margin-right 8px
            .center
                line-height 24px
                font-size 24px
                margin-top 20px
            .bottom
                line-height 22px
                font-size 22px
                margin-top 34px
                color #666666
        .sjsRig
            width 140px
            height 70px
            line-height 70px
            border 1px solid #a90017;/*no*/
            box-sizing border-box
            font-size 22px
            text-align center
            border-radius 10px
            color #a90017
.botBox
    color #333333
    width 628px
    margin 0 auto
    display flex
    flex-direction column
    padding-top 30px
    .ysTxt
        line-height 24px
        font-size 24px
        font-weight bold
        margin-bottom 38px
        em
            color #d1102f
            font-weight bolder
    .desTxt
        font-size 22px
        line-height 36px
        color #666666
        margin-bottom 30px
    .mxBtn
        line-height 22px
        font-size 22px
        color #ce0021
        margin 0 auto
        margin-bottom 30px
</style>
<style lang="stylus">
    .swiper-pagination
        width 314px !important
        height 4px
        display flex
        align-items center
        justify-content center
        position absolute
        bottom 20px
        left 50% !important
        margin-left -157px !important
        // z-index 6
        .swiper-pagination-bullet{
            width 30px
            height 4px
            background #ffffff !important 
            border-radius 0
        }
        // .swiper-pagination-bullet-active{
        //     width 30px
        //     height 4px
        //     background #ffffff !important 
        // }
</style>
